<template>
  <table-row-detail-dialog ref="detailDialog" @confirm="handleConfirm">
    <div class="dialog-body">
      <el-form ref="form" label-width="140px" v-if="formData">
        <form-item-group :form-data="formData" :type="dialogType" ref="formGroup"></form-item-group>
      </el-form>
    </div>
  </table-row-detail-dialog>
</template>

<script>
/**
 * 最基础的弹窗示例
 * 支持详情、编辑、添加的最小功能的弹窗
 */
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index'
import FormItemGroup from '@/components/FormItemGroup/index'

import {add, edit, detail} from '@/api/system/user'

import DetailAction from '@/views/_mixins/detail-action'

export default {
  name: "ItemDetail",
  mixins: [DetailAction],
  components: {
    TableRowDetailDialog,
    FormItemGroup,
  },
  props: {},
  data() {
    return {
    }
  },
  computed: {},
  created() {
  },
  methods: {
    //初始化表单数据
    initFormData() {
      this.formData = {
        "userName": {label: '登录名', value: '', required: true},
        "realName": {label: '昵称', value: '', required: true},
        "description": {label: '用户描述', value: '', type: 'textarea'},
        "enable": {label: '用户状态',type: 'radio',dictKey: 'data_status',value: 1 },
        'demoParam1': {label: '示例1',type: 'select',dictKey: 'data_status',value: '', explainTxt: '这是一个示例属性'},
        'demoParam2': {label: '示例2',type: 'switch',text: ['开启', '关闭'],value: 1},
        'demoParam3': {label: '示例3',type: 'date-picker', value: ''},
        'demoParam4': {label: '示例4',type: 'date-picker', pickerType: 'daterange', value: ''},
      };
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail(data) {
      this.id = data.userId;
      detail(this.id).then(res => {
        for(let key in this.formData) {
          this.formData[key].value = res[key] || ''
        }
      });
    },
    /**
     * 添加记录
     * 校验表单数据后，add接口
     */
    submitAdd(data) {
      add(data).then(this.submitSuccess)
    },
    /**
     * 记录详情数据编辑提交
     * 校验表单数据后，调用edit接口
     */
    submitEdit(data) {
      edit(this.id, data).then(this.submitSuccess);
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
